<template>
  <div>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单查询管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="formInline.cName" placeholder="输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input size="small" v-model="formInline.address" placeholder="输入发货地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="add()" v-if="loginUser.role==1">添加</el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="delAll" style="margin-left:15px;" >一键删除</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
                element-loading-text="拼命加载中" @selection-change="handleSelectionChange" style="width: 100%;">
        <el-table-column align="center" type="selection" width="60"></el-table-column>
        <el-table-column label="编号" width="60">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="course.cname" label="课程名称" :show-overflow-tooltip="true" width="140"></el-table-column>
        <el-table-column prop="course.cdesc" label="课程描述" :show-overflow-tooltip="true" width="140"></el-table-column>
        <el-table-column prop="course.cprice" label="课程单价" width="80"></el-table-column>
        <el-table-column prop="course.ctotalDuration" label="课程时长" width="80"></el-table-column>

        <el-table-column prop="watchPath" label="观看路径" width="240">
          <template slot-scope="scope">
            <video :preload="preload" :poster="videoImg" :height="height" :width="width" align="center"
                   :controls="controls" :autoplay="autoplay">
              <source :src="scope.row.course.watchPath" type="video/mp4">
            </video>
          </template>
        </el-table-column>
        <el-table-column prop="course.createTime" label="其它信息" sortable>
          <template slot-scope="scope">
            <p>{{ formatDate(listData[scope.$index].createTime) }}</p>
          </template>
          <el-table-column prop="login.realName" label="上传人" width="80"></el-table-column>
          <el-table-column prop="login.email" label="电子邮箱" :show-overflow-tooltip="true" width="120"></el-table-column>
          <el-table-column prop="login.mobile" label="联系方式" :show-overflow-tooltip="true" width="120"></el-table-column>
          <el-table-column prop="login.laddress" label="联系地址" :show-overflow-tooltip="true"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="操作" v-if="loginUser.role!==1" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="update(scope.$index, scope.row)">课后题</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!-- 课后题 -->
      <el-dialog :title="updateTitle" :visible.sync="updateFormVisible" width="70%" @click="closeDialog">
        <el-form label-width="120px" :model="updateForm" :rules="rules" ref="updateForm">

          <el-form-item label="课程考试编号" prop="deptName" v-show="false">
            <el-input size="small" v-model="updateForm.id" auto-complete="off" placeholder="请输入编号"></el-input>
          </el-form-item>

          <el-form-item label="1.选择题" prop="title">
            <el-input type="textarea" size="small" v-model="updateForm.title1" auto-complete="off" placeholder="请输入名称"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="6">
              <el-form-item label="选项A" prop="optionA">
                <el-input type="small" v-model="updateForm.optionA" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选项B" prop="optionB">
                <el-input type="small" v-model="updateForm.optionB" size="mini"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选项C" prop="optionC">
                <el-input type="small" v-model="updateForm.optionC" size="mini" rows="8"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选项D" prop="optionD">
                <el-input type="small" v-model="updateForm.optionD" size="mini" rows="8"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="12">
              <el-form-item label="选择" prop="cid">
                <el-select v-model="updateForm.selected1" placeholder="请选择">
                  <el-option key="A" value="A" label="A"></el-option>
                  <el-option key="B" value="B" label="B"></el-option>
                  <el-option key="C" value="C" labels="C"></el-option>
                  <el-option key="D" value="D" label="D"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>


          <el-form-item label="2.判断题" prop="title">
            <el-input type="textarea" size="small" v-model="updateForm.title2" auto-complete="off" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12" :offset="12">
              <el-form-item label="判断" prop="radio">
                <template>
                  <el-radio-group v-model="updateForm.selected2" size="medium">
                    <el-radio border label="正确"></el-radio>
                    <el-radio border label="错误"></el-radio>
                  </el-radio-group>
                </template>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12" :offset="0">
              <el-form-item label="3.填空题" prop="title">
                <div>
                  <el-input placeholder="请输入内容" v-model="updateForm.selected3">
                    <template slot="prepend">{{updateForm.title31}}(</template>
                    <template slot="append">){{updateForm.title32}}</template>
                  </el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="12">
              <el-form-item label="输入" prop="cid">
                <el-input type="small" v-model="updateForm.selected3" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title"
                     @click="updateSave()">保存
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      addFormVisible: false, //控制编辑页面显示与隐藏
      updateFormVisible: false, //控制编辑页面显示与隐藏

      loginUser: JSON.parse(localStorage.getItem("loginUser")),

      // rules表单验证
      rules: {
        id: [{required: true, message: '请输入订单名称', trigger: 'blur'}],
        newsname: [{required: true, message: '请输入登录名称', trigger: 'blur'}],
        password: [{required: true, message: '请输入登录密码', trigger: 'blur'}],
        realname: [{required: true, message: '请输入真实姓名', trigger: 'blur'}],
        gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
        email: [{required: true, message: '请输入电子邮箱', trigger: 'blur'}],
        mobile: [{required: true, message: '请输入联系方式', trigger: 'blur'}],
        role: [{required: true, message: '请输入权限', trigger: 'blur'}],
        sczt: [{required: true, message: '请输入审核状态', trigger: 'blur'}]
      },
      formInline: {
        cName: '',
        address: '',
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('newstoken')
      },
      userparm: [], //搜索权限
      listData: [], //订单数据
      productMana: [], //项目数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },

      updateTitle: '课后题',
      updateForm: {
        id: '',
        title1: '',
        optionA: '',
        optionB: '',
        optionC: '',
        optionD: '',
        selected1: '',
        cid: '',
        cname: '',
        title2: '',
        selected2: '',
        title31: '',
        title32: '',
        selected3: ''
      },

      videoSrc: 'http://192.168.17.131:8080/video/20220423784.mp4',
      videoImg: 'http://192.168.17.131:8080/image/20220423784.jpg',
      playStatus: '',
      muteStatus: true,
      isMute: true,
      isPlay: false,
      width: '240', // 设置视频播放器的显示宽度（以像素为单位）
      height: '120', // 设置视频播放器的显示高度（以像素为单位）
      preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: false,

      dialogVisible: false,
      uploadFileUrl: localStorage.getItem("uploadFileUrl"),
    }
  },
  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata() {
      // 表格加载开始
      // this.loading = true
      const _this = this;

      axios.get(localStorage.getItem("globalUrl") + "purchase/"+(this.loginUser.role===1?"findAll":"findAllBylId?lId="+this.loginUser.lid)).then(function (resp) {
        _this.listData = resp.data.data;

        // 表格加载结束
        _this.loading = false
      });

    },
    formatDate(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },

    filterTag(value, row) {
      return row.tag === value;
    },

    // 搜索事件
    search() {
      const _this = this;
      axios.get(localStorage.getItem("globalUrl") + "purchase/"+(this.loginUser.role===1?"search?":"searchBylId?lId="+this.loginUser.lid+"&")+"cName="+this.formInline.cName+"&address="+this.formInline.address).then(function (resp) {

        _this.listData = resp.data.data;

        // 表格加载结束
        _this.loading = false
      });

    },
    //信息修改监听
    update: function (index, row) {
      const _this = this;
      axios.get(localStorage.getItem("globalUrl") + "examine/findByCId?cId="+row.cid).then(function(resp){

        _this.updateForm = resp.data.data[0];
      });
      this.updateFormVisible = true;
    },
    //课后题
    updateSave(){
      const _this = this;
      axios.put(localStorage.getItem("globalUrl") + "examine/updateSelected",this.updateForm).then(function(result){
        _this.$message({
          type: 'success',
          message: result.data.data
        });
      });

      this.updateFormVisible = false; //控制编辑页面显示与隐藏
    },

    // 删除公司
    deleteUser(index, row) {
      console.log(row)
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        const _this = this;

        axios.delete(localStorage.getItem("globalUrl") + 'purchase/deleteById?id=' + row.pid).then(function () {
          axios.get(localStorage.getItem("globalUrl") + "purchase/findAll").then(function (resp) {
            _this.listData = resp.data.data;

            _this.$message({
              type: 'success',
              message: '删除成功!'
            });

            // 表格加载结束
            _this.loading = false
          });
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })

      })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.updateFormVisible = false
    },
    handleSelectionChange(val) {
      console.log(val)  //打印选中的行集合
      this.multipleSelection = val;
    },
    //点击批量删除
    delAll(){
      const _this = this;
      var arr=[]
      //遍历点击选择的对象集合，拿到每一个对象的id添加到新的集合中
      this.multipleSelection.forEach(row=>arr.push(row.pid))
      this.$confirm('确定删除吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        callback: action => {
          if (action === 'confirm') {
            axios.delete(localStorage.getItem("globalUrl") + 'purchase/deleteByIds?ids='+arr).then(function(result){
              if(result.data.data){
                //批量删除
                _this.$notify({
                  title: '批量删除成功',
                  message: '',
                  type: 'success',
                  duration: 2000
                })
              }else{
                _this.$notify({
                  title: '批量删除失败',
                  message: '',
                  type: 'info',
                  duration: 2000
                })
              }
              axios.get(localStorage.getItem("globalUrl") + "purchase/"+(this.loginUser.role===1?"findAll":"findAllBylId?lId="+this.loginUser.lid)).then(function (resp) {
                _this.listData = resp.data.data;
                // 表格加载结束
                _this.loading = false
              });
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
</style>
